<template>
  <div class="container">
    <div class="left">
      <div class="title">重开采购入库单</div>
      <div class="leftContext">
        <el-table :data="table.list">
          <el-table-column
            label="序号"
            type="index"
            width="55"
          ></el-table-column>
          <el-table-column label="创建时间"></el-table-column>
          <el-table-column label="供应商"></el-table-column>
          <el-table-column label="创建人"></el-table-column>
          <el-table-column label="入库部门"></el-table-column>
          <el-table-column label="入库仓库"></el-table-column>
          <el-table-column label="入库商品" show-overflow-tooltip min-width="120px;"></el-table-column>
          <el-table-column label="商品类型"></el-table-column>
          <el-table-column label="商品图片"></el-table-column>
          <el-table-column label="入库品牌"></el-table-column>
          <el-table-column label="采购数量"></el-table-column>
          <el-table-column label="入库规格"></el-table-column>
          <el-table-column label="入库单价"></el-table-column>
          <el-table-column label="入库金额"></el-table-column>
          <el-table-column label="入库数量"></el-table-column>
          <el-table-column
            label="未入库数量"
            min-width="120px"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="right">
      <div class="title">操作</div>
      <div class="rightContext" style="border: 0">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="入库部门">
            <el-input size="small" placeholder="请输入入库部门"></el-input>
          </el-form-item>
          <el-form-item label="入库类型">
            <el-input size="small" placeholder="请输入入库类型"></el-input>
          </el-form-item>
          <el-form-item label="入库商品">
            <el-input size="small" placeholder="请输入入库商品"></el-input>
          </el-form-item>

          <el-form-item label="入库规格">
            <el-input size="small" placeholder="请输入入库规格"></el-input>
          </el-form-item>
          <el-form-item label="入库品牌">
            <el-input size="small" placeholder="请输入入库品牌"></el-input>
          </el-form-item>
          <el-form-item label="采购数量">
            <el-input size="small" placeholder="请输入采购数量"></el-input>
          </el-form-item>
          <el-form-item label="入库数量">
            <el-input size="small" placeholder="请输入入库数量"></el-input>
          </el-form-item>
          <el-form-item label="入库仓库">
            <div
              v-for="(ite, index) in selectObj.warehouses"
              :key="index"
              v-if="ite.type == 0 || ite.type == undefined"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <el-select
                :value="ite.warName"
                size="mini"
                value-key="id"
                placeholder="请选择"
                :disabled="ite.type == 0"
                @change="myWareListChange($event, ite)"
              >
                <el-option
                  v-for="item in wareList.list"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
              <div style="display: flex; align-items: center">
                <el-input-number
                  size="mini"
                  :min="0"
                  style="margin-right: 10px"
                  placeholder="请输入库存数量"
                  v-model="ite.laterQuantity"
                  @change="inputChange(ite)"
                ></el-input-number>

                <i
                  class="el-icon-remove-outline"
                  style="cursor: pointer"
                  @click="deleteMyWare(ite, ite.type != undefined ? 1 : 0)"
                ></i>
              </div>
            </div>
            <i
              class="el-icon-circle-plus-outline"
              style="cursor: pointer"
              @click="addMyWareList"
            ></i>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload
              class="video"
              ref="upload"
              action="#"
              multiple
              :before-upload="beforeUploadImg"
              :http-request="imgUpload"
              :show-file-list="false"
            >
              <el-button type="primary" size="mini">选择图片</el-button>
            </el-upload>
            <div v-if="fileListImg" class="liimg" v-for='(itemsImg,index) in fileListImg'>
					<img v-if="itemsImg" :src='ImgHttps+itemsImg.img' class="img-avatar" v-image-preview />
					<p v-if="itemsImg">{{(itemsImg.creattime)}}</p>
					<!-- $moment -->
					<p v-if="itemsImg" class="close" @click="delectImgList(index)"><i class="el-icon-error"></i></p>
				</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      table: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
      form: {}, //表单数据
      wareList: {
        list: [],
      },
      fileListImg: [],
      selectObj: {
        warehouses: [],
        title: "",
      },
    };
  },
  activated() {
    this.getWareList();
  },
  methods: {
    delectImgList(index) {
				this.fileListImg.splice(index, 1);
			},
    addMyWareList() {
      if (this.selectObj.warehouses.length < this.wareList.list.length) {
        this.selectObj.warehouses.push({
          difference: 0, //差异,减的是负数,加的是整数
          frontQuantity: 0, //调拨前库存
          laterQuantity: 0, //调拨后库存
          warId: "", //仓库id
          warName: "", //仓库名称
        });
      } else {
        this.$message.warning("不能再加了仓库只有这些");
      }
    },
    beforeUploadImg(file) {
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL;
        let isLt2M = file.size / 1024 / 1024 > 4; // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        let img = new Image();
        img.onload = function () {
          file.width = img.width; // 获取到width放在了file属性上
          file.height = img.height; // 获取到height放在了file属性上
          let valid = img.width > 2000; // 图片宽度大于2000
          // console.log(11, file)
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (valid || isLt2M) {
            imageConversion
              .compressAccurately(file, {
                size: 400,
                width: 2000,
              })
              .then((res) => {
                // console.log(33, res)
                resolve(res);
              });
          } else resolve(file);
        }; // 需要把图片赋值
        img.src = _URL.createObjectURL(file);
      });
    },
    imgUpload(fileObj) {
      let length =
        this.fileListImg.length
      let formData = new FormData();
      formData.append("file", fileObj.file);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      if (length <= 20) {
        this.axios
          .post(
            "/sys/v1/common/upload/files?pathName=internalSystem",
            formData,
            config,
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            console.log(res);
            if (res.code == 0) {
              // this.imageUrl = res.data.url;
              let obj = {
                img: res.data.url,
                creattime: new Date().toLocaleDateString(),
              };
              this.fileListImg.push(obj);
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.$message.warning("视频图片条数不能超过20条");
      }
    },
    //删除现在的仓库
    deleteMyWare(e, t) {
      if (t) {
        let temp = this.selectObj.warehouses.find(
          (res) => res.warId === e.warId
        );
        temp.type = 1;
        temp.difference = temp.difference - temp.laterQuantity;
        temp.laterQuantity = 0;
      } else {
        this.selectObj.warehouses.splice(
          this.selectObj.warehouses.findIndex((res) => res.warId == e.warId),
          1
        );
      }
    },
    //自己选择的仓库修改了
    myWareListChange(e1, e2) {
      let temp = this.selectObj.warehouses.find((res) => e1.id == res.warId);
      if (temp) {
        if (temp.type) {
          this.$message.warning("该仓库已删除不能选");
        } else {
          this.$message.warning("该仓库已存在");
        }
        return;
      }
      e2.warId = e1.id + "";
      e2.warName = e1.name;
      this.$forceUpdate();
    },
    inputChange(e) {
      if (!e.laterQuantity) {
        e.laterQuantity = 0;
      }
      this.$set(e, "difference", e.laterQuantity - e.frontQuantity);
    },
    getWareList() {
      this.axios.post("order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }).then((res) => {
        //仓库数据接口
        this.wareList = res.data;
        this.wareList.list = this.wareList.list.reverse();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .left {
    overflow: auto;
    background: #fff;
    padding: 10px;
    flex: 1;
    min-width: 600px;
    .title {
      color: #6b6b6b;
      font-size: 16px;
      border-bottom: 2px solid #e3e7ec;
      padding-bottom: 10px;
    }
    .leftContext {
      margin-top: 10px;
      border: 1px solid#E3E7EC;
    }
  }
  .right {
    overflow: auto;
    flex: 1;
    background: #fff;
    padding: 10px;
    margin-left: 10px;
    min-width: 400px;
    .title {
      color: #6b6b6b;
      font-size: 16px;
      border-bottom: 2px solid #e3e7ec;
      padding-bottom: 10px;
    }
    .rightContext {
      margin-top: 10px;
      border: 1px solid#E3E7EC;
    }
  }
}
</style>